{% extends "base.html" %}
{% load i18n %}
{% block content %}
<script type="text/javascript">
jQuery(document).ready(function() {    
	getoutboxmessages(1);
    
	jQuery("#pager").pager({ 
    	pagenumber: 1, 
    	pagecount: 15, 
    	buttonClickCallback: clickPage
    });
    
    function clickPage(pageclickednumber){
		jQuery("#pager").pager({ 
	    	pagenumber: pageclickednumber, 
	    	pagecount: 15, 
	    	buttonClickCallback: clickPage
	    });
		getoutboxmessages(pageclickednumber);
    }
    
    function getoutboxmessages(pagenum) {		
    	jQuery.ajax({
	        url: "/getoutboxmessages/?pagenum="+pagenum,
	        dataType: 'json',
	        success: function(data){
	        	var message_html = "<h2>Outbox</h2>";
	        	if (data != null) {
	        		jQuery.each(data, function(index, message) {
		        		message_html = message_html + "<div id='message'>"
		        		+ "<img id='message_type' src='" + message.messagetype.logo + "'></img>"
		        		+ "<p>" + message.title + "</p>"
		        		+ "<p>" + message.content + "</p>"
		        		+ "<p>Received at " + message.receivetime
		        		+ "<a id='comments' href='' alt='0 comment' title='0 comment'>0 comment</a> | "
		        		+ "<a id='forward' href='' alt='Forward to...' title='Forward to...'>Forward to...</a>"
		        		+ "</p>"
		        		+ "</div>";
		        		
		        	});
	        	} else {
	        		message_html = message_html 
	        		+ "<p>No message in outbox</p>"
	        	}
	        	jQuery("#message_list_outbox").html(message_html);
	        }
	    });
    }    
    
});
</script>

      <div id="mainContent">
		
        <div id="content" class="span-24">
	            <div id="message_list_outbox">
	            <!-- <h2>Outbox</h2>
			    {% if message_list %}
			    {% for message in message_list %}
			    <div id="message">
				  <img id="message_type" src="/static/images/message1.jpg"></img>
				  <p>{{ message.title }}</p>
				  <p>{{ message.content }}</p>
				  <p>Created at {{ message.createtime }}
				    <a id="comments" href="" alt="0 comment" title="0 comment">0 comment</a> | 
					<a id="forward" href="" alt="Forward to..." title="Forward to...">Forward to...</a>
				  </p>
				</div>
			      {% endfor %}
			    {% else %}
			    <p>No message in outbox</p>
			    {% endif %}		    
			  </div>
            --></div>
		    		  
		  <div id="pager"></div>		  
      </div>
{% endblock %}